<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=gauge-temperature
-->
<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <!-- <link href="__CDN__/assets/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> -->
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    </head>



</body>
    <body style="background-color: {$site.background_color};">
      <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>



       <div class="container-fluid">
         <div class="row" >
           <button id="update" type="button" class="btn btn-success btn-lg" data-url="/api/bt/update">更新服务器状态</button>
           <button  type="button" class="bg_color btn btn-success btn-lg" data="#fff">白色背景</button>
           <button  type="button" class="bg_color btn btn-success btn-lg" data="#000">黑色背景</button>
           <button id="bg_color_random" type="button" class="btn btn-success btn-lg" data="#999">更换随机背景颜色</button>
           
         </div>
        <div class="row" > 
          {volist name="list" id="v"}
          <div id="container{$v.id}"  class="center-block col-xs-12 col-sm-6 col-md-6 col-lg-3" style="height: 480px;">pull-left</div>
          {/volist}

          
        
        
        </div>
    </div>
        <script type="text/javascript" src="__CDN__/assets/echarts/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="__CDN__/assets/echarts/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="__CDN__/assets/echarts/extension/bmap.min.js"></script>
        -->




    <!-- <script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script> -->

<script type="text/javascript">
 {volist name="list" id="v"}
        
        
var dom{$v.id} = document.getElementById("container{$v.id}");
var myChart{$v.id} = echarts.init(dom{$v.id});
var app = {};

var option{$v.id};


option{$v.id} = {

  title: {
        
        show: true,
        text:'{$v.name}', //显示的信息
        link:"http://he4966.cn", //点击跳转到链接
        // textAlign:'right',
        textVerticalAlign :'auto'
      },
  series: [
  
    {
      
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 200,//仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
      endAngle: -20,//结束角度
      min: 0,
      max: 100,
      splitNumber: 10,//分隔多少个大刻度
      itemStyle: {
        color: 'rgba(4, 180, 74, 0.65)'//仪表盘颜色
      },
      progress: {
        show: true,//是否显示进度条。
        overlap:false,//多组数据时进度条是否重叠。
        width: 8 //动态仪表盘宽度
      },
      pointer: {
        show: false   //是否显示指针
      },
      axisLine: {
        lineStyle: {
          width: 8 //仪表盘背景宽度
        }
      },
      axisTick: {
        distance: -45,
        splitNumber: 5,//每段大刻度里面大小刻度
        lineStyle: {
          width: 1,
          color: '#999'
        }
      },
      splitLine: {
        distance: -52,
        length: 14,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: 10,//负数刻度在外面 
        color: '#999',
        fontSize: 18 //仪表盘的数字
      },
      anchor: {
        show: false
      },

   
   
      detail: {
        show:false
        // valueAnimation: true,//是否开启标签的数字动画。
        // width: '60%',
        // lineHeight: 10,
        // borderRadius: 8,//文字块的圆角
        // offsetCenter: [0, '-60%'],
        // fontSize: 10,//仪表盘的中间动态值
        // fontWeight: 'bolder',
        // formatter: '剩余{value}',
        // color: 'auto'
      },
      data: [
        {
          value: 0,
          
        }
      ]
    },
    {
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 100,
      itemStyle: {
        color: '#F5A9F2'//仪表盘动态颜色
      },
      progress: {
        show: true,//是否显示进度条。
        overlap:false,//多组数据时进度条是否重叠。
        width: 8  ////动态仪表盘宽度
      },
      pointer: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        // show: false
        valueAnimation: true,//是否开启标签的数字动画。
        width: '60%',
        lineHeight: 10,
        borderRadius: 8,//文字块的圆角
        offsetCenter: [0, '40%'],
        fontSize: 12,//仪表盘的中间动态值
        fontWeight: 'bolder',
        formatter: '{value}%ram',
        color: 'auto'
      },
      title: { //设置data里面的name值
        textStyle:{
          color: 'rgba(4, 180, 74, 0.65)',
          fontSize:16
          
        }
      },
      data: [
        {
          value: 0,
          name:"已运行/网站总数"
        }
      ]
    },
    {
      
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 200,//仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
      endAngle: -20,//结束角度
      min: 0,
      max: 100,
      splitNumber: 10,//分隔多少个大刻度
      itemStyle: {
        color: '#DF3A01'//仪表盘颜色
      },
      progress: {
        show: true,//是否显示进度条。
        overlap:false,//多组数据时进度条是否重叠。
        width: 10 //动态仪表盘宽度
      },
      pointer: {
        show: false   //是否显示指针
      },
      axisLine: {
        lineStyle: {
          width: 3 //仪表盘背景宽度
        }
      },
      axisTick: { //仪表盘刻度
        show:false,
        distance: -45,
        splitNumber: 5,//每段大刻度里面大小刻度
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        show:false
        // distance: -52,
        // length: 14,
        // lineStyle: {
        //   width: 3,
        //   color: '#999'
        // }
      },
      axisLabel: {
        show:false
        // distance: -20,
        // color: '#999',
        // fontSize: 20 //仪表盘的数字
      },
      anchor: {
        show: false
      },
   
      detail: {
        valueAnimation: true,//是否开启标签的数字动画。
        width: '60%',
        lineHeight: 30,
        borderRadius: 8,//文字块的圆角
        offsetCenter: [0, '-2%'],
        fontSize: 20,//仪表盘的中间动态值
        fontWeight: 'bolder',
        formatter: '{value} %cpu',
        color: 'auto'
      },
      data: [
        {
          value: 0,
        
        }
      ]
    }

    ,{
      type: 'gauge',
      center: ['50%', '40%'],//位置调整
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 100,
      itemStyle: {
        color: '#009'//仪表盘动态颜色
      },
      progress: {
        show: false,//是否显示进度条。
      },
      pointer: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        show: false
 
      },
      data: [
        {
          value: 0,
          name:"磁盘剩余"
        }
      ]
    }
  ]
};

{/volist}
setInterval(function () {
  // const random = +(Math.random() * 60).toFixed(2);
  $.post("/api/bt/get",{name:'GetNetWork'},function(res){
    console.log(res);
    if(res.code>0){

      {volist name="list" id="v"}
      var disk_str{$v.id} = res.data[{$v.id}].disk[0].size[3];
      var disk{$v.id} = parseInt(disk_str{$v.id}.slice(0,disk_str{$v.id}.length-1));
      myChart{$v.id}.setOption({
        series: [
        
          {
            
            data: [
              {
                value: disk{$v.id},//磁盘使用率
                
              }
            ]
          },
          {
            data: [
              {
                name: res.data[{$v.id}].time+'网站:'+res.data[{$v.id}].site_total+'个',//运行天数 + 网站总数
                value: ((res.data[{$v.id}].mem.memRealUsed/res.data[{$v.id}].mem.memTotal)*100).toFixed(2)//内存使用率
              }
            ]
          },
          {
            
            data: [
              {
                value: res.data[{$v.id}].cpu[0],//CPU使用率
                
              }
            ]
          }
          ,
          {
            
            data: [
              {
                value: 0,//磁盘 剩余
                name:'剩余'+res.data[{$v.id}].disk[0].size[2]
              }
            ]
          }
        ]
      });
      {/volist}


      window.onresize = function(){
        resizemyChartContainer();
        {volist name="list" id="v"}
        myChart{$v.id}.resize();
        {/volist}
        // myChart2.resize();
      }
   
    }
  });
  
}, 2000);

{volist name="list" id="v"}
if (option{$v.id} && typeof option{$v.id} === 'object') {
    myChart{$v.id}.setOption(option{$v.id});
}
{/volist}

   
</script>

<script>

      //获取十六进制颜色
      function randomColor() {
        var color = "";
        for (var i = 0; i < 6; i++) {
          color += (Math.random() * 16 | 0).toString(16);
        }
        return "#" + color;
      }
     
      function update_background_color(color){
        $.post('/api/com/update_background_color', { color: color }, function (res) {
          console.log(res);
          if (res.code < 1) {
            alert(res.msg);
          }
        });
      }
          
      //更新服务器状态列表
      $('#update').on('click', function (e) {
        var url = $(this).attr('data-url');
        $.post(url, { name: 'GetNetWork' }, function (res) {
          console.log(res);
          if (res.code > 0) {
            alert('成功：' + res.data.success + "错误：" + res.data.error);
            if (res.data.success > 0) {
              window.location.reload();
            }
          }
        });
        // location.href = url;
      });

      
      //更换背景颜色
      $('.bg_color').on('click', function (e) {
        var color = $(this).attr('data');
        $("body").css('background-color',color);
        
        update_background_color(color);
       
      });


      
      //更换随机背景颜色
      $('#bg_color_random').on('click', function (e) {
        var color = randomColor();
        $("body").css('background-color',color);
        update_background_color(color);
      });



 
</script>





    </body>
</html>
    